<template>
	<view class="patienInfo-wrap">
		<uni-forms label-width="100" :rules="rules" :value="formData" ref="form" err-show-type="toast">
			<uni-forms-item label="患者姓名" name="patientName">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="20" v-model="formData.patientName"
					placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="性别" name="sex">
				<uni-data-checkbox :value="formData.sex" :localdata="rangeSex" @change="sexChange"></uni-data-checkbox>
			</uni-forms-item>

			<uni-forms-item label="出生年月" name="birthTime">
				<picker @change="birthTimeChange" mode="date" :end="endDate">
					<view class="patienInfo-right">
						<view v-if="!formData.birthTime" class="patienInfo-select">请选择出生年月</view>
						<image v-if="!formData.birthTime" class="patienInfo-next"
							src="http://k8s.vendingtech.vip/images/next_icon@2x.png"></image>
						<view v-if="formData.birthTime" class="patienInfo-value">{{ formData.birthTime }}</view>
					</view>
				</picker>
			</uni-forms-item>

			<uni-forms-item label="联系方式" name="phone">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="11" type="number" v-model="formData.phone"
					placeholder="请输入联系电话" />
			</uni-forms-item>

			<uni-forms-item label="验证码" name="regCode">
				<view class="regCode">
					<uni-easyinput style="flex: 1" @input="checkDisabledBtn" :maxlength="20" type="number"
						v-model="formData.regCode" placeholder="请输入验证码" />
					<button v-if="!verifydate" @click="phoneValidate">获取验证码</button>
					<button v-else style="background: #ACB1C2;">
						{{ verifydate }}s后重新获取</button>
				</view>
			</uni-forms-item>

			<uni-forms-item label="身份证号" name="idNum">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="18" v-model="formData.idNum"
					placeholder="请输入身份证号" />
			</uni-forms-item>
		</uni-forms>

		<u-bottom-button v-if="!id" value="保存患者信息" :disabled="disabled" @click="formSubmit(0)"></u-bottom-button>

		<!-- 	<view class="patienInfo-bottom iphonex-footer">
			<view class="patienInfo-bottom-box">
				<view class="patienInfo-bottom-delete" @click="deletePatient">删除患者</view>
				<view class="patienInfo-bottom-save" @click="formSubmit(1)">保存患者</view>
			</view>
		</view> -->

		<u-bottom-button v-if="id" type="2" value1="删除患者" value2="保存患者" @clickOne="deletePatient"
			@clickTwo="formSubmit(1)"></u-bottom-button>
	</view>
</template>

<script>
import uniDataCheckbox from '@/components/uni/uni-data-checkbox/uni-data-checkbox.vue';
import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
import uniEasyinput from '@/components/uni/uni-easyinput/uni-easyinput.vue';
import uniForms from '@/components/uni/uni-forms/uni-forms.vue';
import uniFormsItem from '@/components/uni/uni-forms-item/uni-forms-item.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
export default {
	components: {
		uniForms,
		uniFormsItem,
		uniEasyinput,
		uniPopup,
		uniDataCheckbox
	},
	data() {
		return {
			id: null,
			disabled: true,

			rules: {
				patientName: {
					rules: [
						{
							required: true,
							message: '请填写患者姓名'
						}
					]
				},
				phone: {
					rules: [
						{
							required: true,
							message: '请填写手机号码'
						},
						{
							pattern: '^1[3456789]\\d{9}$',
							errorMessage: '请填写正确的手机号格式'
						}
					]
				},
				regCode: {
					rules: [
						{
							required: true,
							errorMessage: '请填写验证码'
						}
					]
				},
				sex: {
					rules: [
						{
							required: true,
							message: '请选择性别'
						}
					]
				},
				birthTime: {
					rules: [
						{
							required: true,
							message: '请选择出生年月'
						}
					]
				},
				idNum: {
					rules: [
						{
							required: true,
							message: '请填写身份证号码'
						},
						{
							pattern: '^[1-9]\\d{5}(18|19|20|(3\\d))\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
							errorMessage: '请填写正确的身份证格式'
						}
					]
				}
			},
			formData: {
				patientName: '',
				phone: '',
				regCode:'',
				birthTime: '',
				idNum: '',
				sex: 1
			},
			verifydate:''  //倒计时
		};
	},

	onLoad(option) {
		this.id = option.id;
	},
	onShow() {
		if (this.id) {
			this.patientDetail();
		}
	},
	computed: {
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year - 1;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		sexChange(e) {
			this.formData.sex = e.detail.value;
			this.checkDisabledBtn();
		},

		birthTimeChange(e) {
			this.formData.birthTime = e.detail.value;
			this.checkDisabledBtn();
		},

		//切换默认患者
		switchDefault() {
			this.formData.isDefault = !this.formData.isDefault;
		},

		//校验按钮
		checkDisabledBtn() {
			let b = false;
			Object.keys(this.formData).forEach(key => {
				if (this.formData[key] === '') {
					b = true;
				}
			});
			this.disabled = b;
		},

		//校验表单
		formSubmit(type) {
			this.$refs.form
				.submit()
				.then(res => {
					if (type == 0) {
						this.addPatient();
					} else {
						this.updatePatient();
					}
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},

		//添加患者
		addPatient() {
			this.$api
				.addPatient({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//删除患者
		deletePatient() {
			uni.showModal({
				title: '确认要删除该患者吗？',
				success: res => {
					if (res.confirm) {
						this.$api
							.deletePatient({
								params: {
									id: this.id
								}
							})
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									uni.navigateBack({
										delta: 1
									});
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							});
					}
				}
			});
		},

		//患者详情
		patientDetail() {
			this.$api
				.patientDetail({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.formData = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//修改患者信息
		updatePatient() {
			this.$api
				.updatePatient({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},
		// 发送验证码
		phoneValidate() {
			if (this.formData.phone) {
				this.$api.phoneValidate({
					data: {
						phone: this.formData.phone,
						type: '4'
					}
				}).then(e => {
					this.verifydate = 30
					const setIid = setInterval(() => {
						if (this.verifydate <= 0) {
							clearInterval(setIid)
						} else {
							this.verifydate--;
						}
					}, 1000)
					if (e.code != 200) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						});
					}
				})
			} else {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			}

		},
	}
};
</script>

<style lang="less">
@import './patientInfo.less';
</style>
